<template>
    <h1>API</h1>
  <el-row class="mb-4">
    <b>属性</b>
    <table width="100%">
        <tr>
          <th width="15%">属性名</th>
          <th>说明</th>
          <th width="15%">类型</th>
          <th width="15%">默认值</th>
        </tr>
        <tr v-for="item in attrs">
          <td>{{item.name}}</td>
          <td>{{item.desc}}</td>
          <td>{{item.type}}</td>
          <td>{{item.defaultValue}}</td>
        </tr>
      </table>
      <b>Slots</b>
    <table width="100%">
      <tr>
          <th width="30%">名称</th>
          <th>说明</th>
      </tr>
      <tr v-for="item in attrs">
          <td>{{item.name}}</td>
          <td>{{item.desc}}</td>
      </tr>
    </table>
  </el-row>
    <div>
        <el-link href="https://element-plus.org" target="_blank">default</el-link>
        <el-link type="primary">primary</el-link>
        <el-link type="success">success</el-link>
        <el-link type="warning">warning</el-link>
        <el-link type="danger">danger</el-link>
        <el-link type="info">info</el-link>
    </div>
    <div>
        <el-link disabled>default</el-link>
        <el-link type="primary" disabled>primary</el-link>
        <el-link type="success" disabled>success</el-link>
        <el-link type="warning" disabled>warning</el-link>
        <el-link type="danger" disabled>danger</el-link>
        <el-link type="info" disabled>info</el-link>
    </div>
    <div>
        <el-link :underline="false">Without Underline</el-link>
        <el-link>With Underline</el-link>
    </div>
    <div>
        <el-link :icon="Edit">Edit</el-link>
        <el-link>
            Check<el-icon class="el-icon--right"><icon-view /></el-icon>
        </el-link>
    </div>
</template>
<script setup>
import { Edit,View as IconView} from '@element-plus/icons-vue'
</script>
<script>
export default {
    data(){
        return {
            attrs:[{
              "name":"type",
              "desc":"类型",
              "type":"枚举[primary|success|warning|danger|info|default]",
              "defaultValue":"default"
            },{
              "name":"underline",
              "desc":"是否下划线",
              "type":"boolean",
              "defaultValue":"true"
            },{
              "name":"disabled",
              "desc":"是否是禁用状态",
              "type":"boolean",
              "defaultValue":"false"
            },{
              "name":"href",
              "desc":"原生href属性",
              "type":"string",
              "defaultValue":"-"
            },{
              "name":"icon",
              "desc":"图标组件",
              "type":"string｜Component",
              "defaultValue":"-"
            }],
            slots:[{
              "name":"default",
              "desc":"自定义默认内容"
            },{
              "name":"icon",
              "desc":"自定义图标组件"
            }]
        }
    }
}
</script>
<style scoped>
.el-link{
     margin-right: 8px;
}

.el-link .el-icon--right.el-icon {
    vertical-align: text-bottom;
}
</style>